<template>
	<view class="pd-30">
		<navHead :datas="headData"></navHead>
		<view style="height: 210rpx;"></view>
		<view class="inp-item flex-bwt pd-20">
			<view class="ft fw-800">预约日期</view>
			<picker mode="date" :value="appointment_date" @change="changeDate">
				<view class="r flex-end">
					<view class="txt" :class="{act:appointment_date}">{{appointment_date?appointment_date:'请选择'}}
					</view>
					<image class="icon ml-10" mode="widthFix"
						src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"></image>
				</view>
			</picker>
		</view>
		<view class="inp-item flex-bwt pd-20 mt-20">
			<view class="ft fw-800">预约时间</view>
			<picker mode="time" :value="appointment_time" @change="changeTime">
				<view class="r flex-end">
					<view class="txt" :class="{act:appointment_time}">{{appointment_time?appointment_time:'请选择'}}
					</view>
					<image class="icon ml-10" mode="widthFix"
						src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"></image>
				</view>
			</picker>
		</view>
		<view class="inp-item flex-bwt pd-20 mt-20">
			<view class="ft fw-800">咨询方式</view>
			<picker mode="selector" :range="orderOptions.consult_list" @change="changeConsultType">
				<view class="r flex-end">
					<view class="txt" :class="{act:consult_type}">{{consult_type?consult_type:'请选择'}}</view>
					<image class="icon ml-10" mode="widthFix"
						src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"></image>
				</view>
			</picker>
		</view>
		<view class="inp-item flex-bwt pd-20 mt-20">
			<view class="ft fw-800">项目需求</view>
			<picker mode="selector" :range="orderOptions.intention_list" @change="changeIntention">
				<view class="r flex-end">
					<view class="txt" :class="{act:intention}">{{intention?intention:'请选择'}}</view>
					<image class="icon ml-10" mode="widthFix"
						src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"></image>
				</view>
			</picker>
		</view>
		<view class="inp-item flex-bwt pd-20 mt-20">
			<view class="ft fw-800">联系方式</view>
			<view class="r flex-end">
				<input class="inp" placeholder="请输入手机号" placeholderStyle="font-size: 24rpx;color: #D1D1D1;"
					border="none" v-model="tel"></input>
			</view>
		</view>
		<view class="inp-item flex-bwt pd-20 mt-20">
			<view class="ft fw-800">联系人</view>
			<view class="r flex-end">
				<input class="inp" placeholder="请输入名称" placeholderStyle="font-size: 24rpx;color: #D1D1D1;"
					border="none" v-model="linkname"></input>
			</view>
		</view>
		<view style="height: 180rpx;"></view>
		<view class="btn_box pd-20">
			<view class="btn" @click="back">返回</view>
			<view class="btn submit" @click="sub">提交</view>
		</view>
	</view>
</template>

<script setup lang="js">
	import {
		reactive,
		ref
	} from 'vue';
	import navHead from '@/components/navHead.vue';
	import dialogPop from '@/components/dialogPop.vue';
	import {
		utils
	} from '@/utils/utils.js';
	import {
		api
	} from '@/utils/api.js';
	import {
		onLoad
	} from "@dcloudio/uni-app";
	const headData = reactive({
		color: '#fff',
		title: '修改订单'
	})
	
	const back = ()=>{
		uni.navigateBack()
	}
	
	const sub = ()=>{
		const formData = {
			id: orderId.value,
			is_sub: 1,
			appointment_time: appointment_date.value + (appointment_date.value && appointment_time.value ? ' ' +
				appointment_time.value + ':00' : (appointment_date.value ? ' 00:00:00' : '')),
			consult_type: consult_type.value,
			intention: intention.value,
			tel: tel.value,
			linkname: linkname.value,
		}
		utils
			.request(
				api.editSaleAppointment, formData,
				"post"
			)
			.then((res) => {
				getApp().globalData.shouldRefresh = true;
				uni.navigateBack()
			});
	}
	
	const appointment_date = ref('')
	const appointment_time = ref('')
	const changeDate = (e) => {
		appointment_date.value = e.detail.value
	}
	const changeTime = (e) => {
		appointment_time.value = e.detail.value
	}
	const changeConsultType = (e) => {
		consult_type.value = orderOptions.value.consult_list[e.detail.value]
	}
	const changeIntention = (e) => {
		intention.value = orderOptions.value.intention_list[e.detail.value]
	}
	
	const consult_type = ref('')
	const intention = ref('')
	const tel = ref('')
	const linkname = ref('')
	
	const orderId = ref('')
	const detail = ref({})
	const orderOptions = ref({})
	const loadData = () => {
		utils
			.request(
				api.editSaleAppointment, {
					id: orderId.value
				},
				"post"
			)
			.then((res) => {
				detail.value = res.data
				
				appointment_date.value = res.data.appointment_time.substr(0,10)
				appointment_time.value = res.data.appointment_time.substr(11,5)
				console.log(appointment_time.value,123456)
				consult_type.value = res.data.consult_type
				intention.value = res.data.intention
				tel.value = res.data.tel
				linkname.value = res.data.linkname
				
			});
		utils
			.request(
				api.getSaleOptions, {},
				"get"
			)
			.then((res) => {
				orderOptions.value = res.data
			});
	}
	onLoad(option => {
		orderId.value = option?.order_id || ''
		loadData()
	})
</script>

<style lang="scss" scoped>
	
	.btn_box {
		display: flex;
		position: fixed;
		z-index: 99;
		bottom: 0;
		left: 0;
		background: #F8F8F8;
		width: 100%;
		padding-top: 10rpx;
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
		box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);
	
		.btn {
			text-align: center;
			line-height: 78rpx;
			height: 78rpx;
			font-size: 28rpx;
			border-radius: 20rpx;
			width: 196rpx;
			background-color: #fff;
		}
	
		.submit {
			flex: 1;
			background-color: #333;
			color: #DBF046;
			margin-left: 20rpx;
		}
	}
	
	.inp-item {
		background: #F1F1F1;
		border-radius: 20rpx;
	
		.r {
			width: 480rpx;
		}
	
		.txt {
			font-size: 24rpx;
			color: #999999;
		}
	
		.txt.act {
			color: #666666;
		}
	
		.icon {
			width: 20rpx;
			height: 34rpx;
			flex-shrink: 0;
		}
	
		.inp {
			text-align: right;
			font-size: 24rpx;
			color: #666666;
			width: 480rpx;
		}
	}
	
</style>